<template>
  <div>
    <h1>Page/index.vue</h1>
    <ul>
      <li v-for="(item, index) in channels" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      channels: []
    }
  },
  asyncData () {
    console.log('---------asyncData-------')
  },
  beforeCreate () {
    console.log('-------------beforeCreate---------------')
  },
  created () {
    console.log('-------------created---------------')
  },
  beforeMount () {
    console.log('-------------beforeMount---------------')
  },
  beforeUpdate () {
    console.log('-------------beforeUpdate---------------')
  },
  updated () {
    console.log('-------------updated---------------')
  },
  beforeDestroy () {
    console.log('-------------beforeDestroy---------------')
  },
  destroyed () {
    console.log('-------------destroyed---------------')
  },
  async mounted () {
    console.log('-------------mounted---------------')
    // 打开页面时通过 axios 发送主动到服务器，去得到数据，并且渲染到页面上（源代码中可以看到数据）
    const res = await axios({
      url: 'http://ttapi.research.itcast.cn/app/v1_0/user/channels'
    })
    this.channels = res.data.data.channels
  }
}
</script>

<style scoped></style>
